<script src="../../config/index.js"></script>
<template>
  <div class="dataListPage">
    <Check v-show="showCheck" v-bind:dataInfo="dataInfo" @close="close"></Check>
    <AddChineseMedicineCulture v-show="showAdd" @getData="getData" @closeAdd="closeAdd"></AddChineseMedicineCulture>
    <EditChineseMedicineCulture v-show="showEdit" v-bind:dataInfo="dataInfo" @getData="getData" @closeEdit="closeEdit"></EditChineseMedicineCulture>

    <div v-show="showDele" class="deleDiv">
      <h2>是否下架</h2>
      <div>
        <button @click="dele">确定</button>
        <button @click="showDele=false">取消</button>
      </div>
    </div>

    <div class="head centere">
      <div class="search">
        <div>
          <input id="search-blog-words" v-model="form.search" placeholder="请输入" type="text">
          <span v-on:click="getData">搜索</span>
        </div>
      </div>
      </div>

    <div class="filter centere">
      <span>
        其他选项：
      </span>

      <span>
        展示状态：
      </span>

      <select v-model="form.status">
        <option value="9">全部</option>
        <option value="6">保存</option>
        <option value="8">已上架</option>
        <option value="7">待审核</option>
      </select>

      <span >发布时间</span>
      <input  class="form-input" v-model="form.startTime"  type="date" >
      <span>至</span>
      <input  class="form-input" v-model="form.endTime" type="date">

    </div>

    <div class="filter-next centere">
      <div class="inserButton" @click="showAdd=true">
        新增中医文化
      </div>
    </div>


    <div class="dataList centere">
      <table>
        <thead class="fixedHeader">
        <tr>
          <th>文章标题</th>
          <th>来源</th>
          <th>作者</th>
          <th>发布时间</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="data in dataList">
          <th>{{data.hotspotTitle}}</th>
          <th>{{data.hotspotSource}}</th>
          <th>{{data.hotspotAuthor}}</th>
          <th>{{moment(data.itemcreateat).format('YYYY-MM-DD HH:mm:ss')}}</th>
          <th>
            <span v-on:click="show(data)">
              查询
            </span>
            <span @click="showDeleFuction(data.itemid)">
              下架
            </span>
            <span @click="showEditFuncton(data)">
              编辑
            </span>
          </th>
        </tr>
        </tbody>
      </table>
    </div>

    <div class="pagination centere">
      <Pagination
        ref="Pagination"
        :current-page="pagination.currentPage"
        :pageSize="pagination.pageSize"
        :totals="pagination.totals"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

  </div>
</template>
<script>
  import Pagination from "../Pagination";
  import Check from "./Check";
  import AddChineseMedicineCulture from "./AddChineseMedicineCulture";
  import EditChineseMedicineCulture from "./EditChineseMedicineCulture";

  const axios=require("axios");
  var moment=require("moment");

  export default {
    name: 'ChineseMedicineCulture',
    components: {
      Pagination,
      Check,
      AddChineseMedicineCulture,
      EditChineseMedicineCulture,
    },
    data() {
      return {
        dataInfo:{},
        showDele:false,
        deleItemId:'',
        showCheck:false,
        showEdit:false,
        showAdd:false,
        pagination: {
          pageSize: 5, // 显示的条数
          totals: 0, // 总数
          currentPage: 1, // 当前第几页
        },
        form:{
          search:"",
          status:"9",
          startTime:"",
          endTime:""
        },
        dataList: [],
        moment
      }
    },



    created: function(){
      this.getData();
    },



    methods: {
      showDeleFuction(val){
        this.showDele=true
        this.deleItemId=val
      },
      show(dataInfo){
        this.dataInfo=dataInfo;
        console.log(this.dataInfo);
        this.showCheck=true;
      },
      showEditFuncton(dataInfo){
        this.dataInfo=dataInfo;
        this.showEdit=true;
      },
      dele(){
        this.showDele=false
        var vm=this
        axios.post('http://localhost:8852/deleTraditionalCultural',
          {
            itemid:vm.deleItemId
          })
          .then(function (res) {
            if(res.data.success){
              vm.getData();
              alert("删除成功")
            }
          })
          .catch(function (error) {
            console.log(error);
          });
      },
      getData(){
        var vm=this;
        axios.post('http://localhost:8852/getAllTraditionalCultural',{
            startTime:vm.form.startTime,
            endTime:vm.form.endTime,
            tbNatmehaHotspot:{
              dataType:"3",
              dataStatus:vm.form.status,
              hotspotTitle:vm.form.search,
            },
            page:{
              current:vm.pagination.currentPage,
              size:vm.pagination.pageSize,
            }
        })
          .then(function (res) {
            vm.pagination.totals=res.data.data.total;
            vm.dataList=res.data.data.records;
          })
          .catch(function (error) {
            console.log(error);
          });
      },
      // 改变每页的显示数量
      handleSizeChange(val) {
        this.pagination.pageSize = val.pageSize;

        this.getData();
      },
      // 翻页
      handleCurrentChange(val) {
        val.totals = this.pagination.totals;
        this.pagination = {
          ...val,
        };
        this.getData();
      },
      close(){
        this.showCheck=false;
      },
      closeAdd(){
        this.showAdd=false;
      },
      closeEdit(){
        this.showEdit=false;
      }

    // methods: {
    //   search(keywords) {
    //     return this.carList.filter(element => {
    //       return element.name.includes(keywords)
    //     })
    //   },
    //   del(id) {
    //     this.carList.some((element, index) => {
    //       if (element.id === id) {
    //         this.carList.splice(index, 1)
    //         return true
    //       }
    //     })
    //   },
    //   add() {
    //     const car = {id: this.id, name: this.name, ctime: new Date()}
    //     this.carList.push(car)
    //   }
    // }
  }
  }
</script>
<style>

  *{margin:0;padding:0;}
  ul,ol,li{
    list-style-type: none;
  }
  .w {
    width: 1280px;
    margin: auto;
  }
  img{
    border: 0;
    vertical-align: middle;
  }

  a{
    text-decoration:none
  }

  .dataListPage .centere{
    margin: 0 auto;
  }
  .dataListPage>.head{
    width: 1074px;
    height: 80px;
    background: #ffffff;
    border-bottom: 2px #f1f1f1 dashed;
    display: flex;
    align-items: center;
  }

  .dataListPage>.head .search{
    background-color: #ffffff;
    height: 48px;
    border-top:1px #f5f6f700 solid;
  }
  .dataListPage>.head .search>div{
    width: 300px;
    margin:7px 0px;
    height: 32px;
    border-radius: 5px;
    background: #ffffff;
    border: 1px rgb(242, 242, 242) solid;
  }

  .dataListPage>.head .search>div #search-blog-words{
    outline:none;
    background-color: #ffffff;
    font-size: 14px;
    color: #555666;
    display: block;
    float: left;
    width: 226px;
    padding-left: 10px;
    border: 0;
    height: 32px;
    border-radius: 5px;
  }


  .dataListPage>.head .search>div span{
    display: inline-block;
    background-color: #d60000;
    width: 60px;
    height: 32px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    line-height: 32px;
    font-family: 'Microsoft YaHei ', 'Microsoft YaHei', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 12px;
    color: #FFFFFF;
    text-align: center;
  }

  .dataListPage>.head .search>div span:hover{
    cursor:pointer;
    background-color: #d67070;
  }


  .dataListPage>.filter{
    display: flex;
    align-items: center;
    height: 80px;
    width: 1074px;
    background-color: #ffffff;
    font-family: 'Microsoft YaHei ', 'Microsoft YaHei', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.847058823529412);
    line-height: 22px;
  }

  .dataListPage  .filter select{
    width: 240px;
    height: 32px;
    background-color: #ffffff;
    border: 1px rgb(242, 242, 242) solid;
  }

  .dataListPage .filter>span:nth-child(2){
    margin-left: 10px;
  }

  .dataListPage .filter>span:nth-child(4){
    margin-left: 60px;
    margin-right: 10px;
  }

  .dataListPage .filter input{
    height: 32px;
    width: 120px;
    background-color: white;
    border: 1px rgb(242, 242, 242) solid;
  }

  .dataListPage .filter-next{
    width: 1074px;
  }
  .dataListPage .filter-next .inserButton{
    width: 102px;
    height: 29px;
    line-height: 29px;
    background: inherit;
    background-color: inherit;
    background-color: rgba(214, 0, 0, 1);
    border: none;
    border-radius: 5px;
    font-size: 12px;
    font-family: 'Arial Normal', 'Arial', sans-serif;
    font-weight: 400;
    font-style: normal;
    text-align: center;
    color: white;
  }
  .dataListPage  .filter-next .inserButton:hover{
    cursor:pointer;
    background-color:#d67070
  }

  .dataListPage  .dataList{
    margin-top: 20px;
    width: 1162px;
    background-color: #f1f1f1;
  }
  .dataListPage  .dataList table{
    border-collapse: collapse;
    width: 100%;
  }
  .dataListPage  .dataList thead th{
    height: 52px;

    line-height: 52px;
    text-align: center;
    background-color: #775637;
    font-family: 'Microsoft Tai Le Bold', 'Microsoft Tai Le Regular', 'Microsoft Tai Le', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.980392156862745);
  }

  .dataListPage  .dataList tbody th{
    background-color: white;
    font-family: 'Microsoft YaHei ', 'Microsoft YaHei', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 12px;
    color: rgba(85, 85, 85, 0.996078431372549);
    text-align: center;
    line-height: 92px;
  }

  .dataListPage   .dataList tbody th:nth-child(1){
    color: #775637;
  }

  .dataListPage   .dataList tbody th:nth-child(5){
    color: #775637;
  }
  .dataListPage  .dataList tbody th:nth-child(5) span:hover{
    cursor: pointer;
    color: #775000;
  }

  .dataListPage  .pagination{
    width: 1162px;
    margin-top: 20px;
    height: 80px;
  }

  .dataListPage  .page-wrapper {
    float: right;
  }
  .dataListPage .deleDiv{

    border: 1px #775637 solid;
    background-color: #ffffff;
    width: 300px;
    height: 150px;
    overflow: hidden;
    position: fixed;
    top: 50%;
    left: 0;
    right: 0;
    margin:auto;
    border-radius: 8px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
  }

  .dataListPage .deleDiv>div{
    display: flex;
    margin: 0 auto;
    align-items: center;
    width: 200px;
  }
  .dataListPage .deleDiv>div button{

    margin: 0 auto;
    display: inline-block;
    font-weight: 400;
    color: #FFFFFF;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    background-color: #D60000;
    border-color: #D60000;
  }

  .dataListPage .deleDiv>div button:hover{
    cursor: pointer;
    background-color: rgba(214, 0, 0, 0.68);
  }

  .dataListPage .deleDiv h2{
    padding: 20px 0;
    text-align: center;
  }


</style>


